<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="12"><i class="el-icon-arrow-left" @click="$router.back(-1)"></i></el-col>
                <el-col :span="10"><span class="name-title">{{template.name}}</span></el-col>
                <el-col :span="2" v-if="template.templateSort&&template.templateSort.value==='FIXED'">
                    <el-button type="primary" @click.native="handlePublish">派发</el-button>
                    <!--<i class="el-icon-upload2" @click="handlePublish"></i>-->
                    <!--<i class="el-icon-delete" @click="handleDelete"></i>-->
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="300px" class="user-header-bg">
                <img src="@/assets/task.jpg"
                     style="width: 150px;height: 150px"></el-aside>
            <el-main class="user-info-bg">
                <el-row>
                    <el-col :span="12">名称：{{template.name}}</el-col>
                    <el-col :span="12" v-if="template.period!=''&&template.period!=null">物候期：{{template.period?template.period.name:'暂无'}}
                    </el-col>
                    <el-col :span="12" v-else>任务类型：{{template.taskType?template.taskType.name:'暂无'}}</el-col>
                </el-row>
                <el-row class="user-row">
                    <el-col :span="12">开始时间：{{template.startTime}}</el-col>
                    <el-col :span="12">结束时间：{{template.endTime}}</el-col>
                </el-row>
                <el-row class="user-row">
                    <el-col :span="24">描述：{{template.desc}}</el-col>
                </el-row>
            </el-main>
        </el-container>
        <!--技术要点和发布记录-->
        <el-container>
            <div class="ground-bg">
                <el-tabs v-model="tabIndex" type="card" stretch @tab-click="handleTab">
                    <el-tab-pane label="技术要点">
                        <el-table
                                :data="quotaDataList"
                                border
                                stripe
                                style="width: 100%"
                        >
                            <el-table-column
                                    prop="id"
                                    label="ID"
                            />
                            <el-table-column
                                    prop="name"
                                    label="名称"
                            />
                            <el-table-column
                                    prop="score"
                                    label="分数"
                            />
                            <el-table-column
                                    prop="desc"
                                    label="描述"
                            />
                            <!--<el-table-column label="操作"-->
                                             <!--v-if="template.templateSort&&template.templateSort.value!='FIXED'">-->
                                <!--<template slot-scope="scope">-->
                                    <!--<el-button-group>-->
                                        <!--<el-button-->
                                                <!--title="编辑"-->
                                                <!--size="mini"-->
                                                <!--type="primary"-->
                                                <!--icon="el-icon-fa-edit"-->
                                                <!--@click="treeEdit(scope.row)"-->
                                        <!--&gt;-->
                                            <!--编辑-->
                                        <!--</el-button>-->
                                        <!--<el-button-->
                                                <!--title="删除"-->
                                                <!--size="mini"-->
                                                <!--type="primary"-->
                                                <!--icon="el-icon-fa-trash"-->
                                                <!--@click="treeDelete(scope.row)"-->
                                        <!--&gt;-->
                                            <!--删除-->
                                        <!--</el-button>-->
                                    <!--</el-button-group>-->
                                <!--</template>-->
                            <!--</el-table-column>-->
                        </el-table>
                    </el-tab-pane>

                    <el-tab-pane label="农资方案">
                        <el-table
                                :data="planDataList"
                                border
                                stripe
                                @row-dblclick="goPlanDetail"
                                style="width: 100%"
                        >
                            <el-table-column
                                    prop="id"
                                    label="ID"
                            />
                            <el-table-column
                                    prop="name"
                                    label="名称"
                            />
                            <el-table-column
                                    prop="planType.name"
                                    label="类型"
                            />
                            <el-table-column
                                    prop="drugPeriod"
                                    label="用药时期"
                            />
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button-group>
                                        <el-button
                                                title="详情"
                                                size="mini"
                                                type="primary"
                                                icon="el-icon-fa-edit"
                                                @click="goPlanDetail(scope.row)"
                                        >
                                            详情
                                        </el-button>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>

                    <el-tab-pane label="发布记录">
                        <el-table
                                border
                                stripe
                                @row-dblclick="goDetail"
                                :data="pager.dataList"
                                style="width: 100%"
                        >
                            <el-table-column
                                    prop="id"
                                    label="ID"
                            />
                            <el-table-column
                                    prop="userName"
                                    label="派发人"
                            />
                            <el-table-column
                                    prop="createTime"
                                    label="派发时间"
                            />
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button-group>
                                        <el-button
                                                title="详情"
                                                size="mini"
                                                type="primary"
                                                icon="el-icon-fa-edit"
                                                @click="goDetail(scope.row)"
                                        >
                                            详情
                                        </el-button>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-row>
                            <el-col
                                    :span="6"
                                    :offset="18"
                            >
                                <el-pagination
                                        style="float:right"
                                        layout="prev, pager, next"
                                        :total="pager.pager.recordCount"
                                        :page-size="pager.pager.pageSize"
                                        :current-page.sync="pager.pager.pageNumber"
                                        v-show="pager.pager.pageCount != 0"
                                        @current-change="changePage"
                                />
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-container>
        <!--发布任务-->
        <Publish
                v-model="publishValue"
                @on-show-change="publishDone"
        />
        <el-dialog
                title="派发详情"
                :visible.sync="publishShow"
                width="600px">
            <el-container>
                <el-main>
                    <el-row>
                        <el-col :span="12">派发人：{{publish.userName}}</el-col>
                        <el-col :span="12">派发时间：{{publish.createTime}}</el-col>
                    </el-row>
                </el-main>
            </el-container>
            <el-container>
                <el-header class="header-bg">
                    <span class="header-title">实施人列表</span>
                </el-header>
            </el-container>
            <el-table
                    border
                    stripe
                    :data="userPager.dataList"
                    style="width: 100%"
            >
                <el-table-column
                        prop="id"
                        label="用户id"
                />
                <el-table-column
                        prop="realName"
                        label="实施人"
                />
            </el-table>
            <el-row>
                <el-col
                        :span="6"
                        :offset="18"
                >
                    <el-pagination
                            style="float:right"
                            layout="prev, pager, next"
                            :total="userPager.pager.recordCount"
                            :page-size="userPager.pager.pageSize"
                            :current-page.sync="userPager.pager.pageNumber"
                            v-show="userPager.pager.pageCount != 0"
                            @current-change="loadPublishUsers"
                    />
                </el-col>
            </el-row>
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button
                size="small"
                @click="cancel()"
        >返回</el-button>
      </span>
        </el-dialog>

        <el-dialog
                title="方案详情"
                :visible.sync="planShow"
                width="600px">
            <el-container>
                <el-main>
                    <el-row>
                        <el-col :span="8">方案名称：{{plan.name}}</el-col>
                        <el-col :span="8">方案类型：{{plan.planType?plan.planType.name:'暂无'}}</el-col>
                        <el-col :span="8">用药时期：{{plan.drugPeriod}}</el-col>
                    </el-row>
                </el-main>
            </el-container>
            <el-container>
                <el-header class="header-bg">
                    <span class="header-title">农资列表</span>
                </el-header>
            </el-container>
            <el-table
                    :data="materielDataList"
                    border
                    stripe
                    style="width: 100%"
            >
                <el-table-column
                        prop="id"
                        label="ID"
                />
                <el-table-column
                        prop="materielName"
                        label="农资名称"
                />
                <el-table-column
                        prop="dosage"
                        label="用量"
                />
                <el-table-column
                        prop="composition"
                        label="成分"
                />
            </el-table>
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button
                size="small"
                @click="planShow=false"
        >返回</el-button>
      </span>
        </el-dialog>
    </el-container>
</template>
<script>
    import Publish from "./publish"

    export default {
        components: {
            Publish: Publish,
        },
        data() {
            return {
                publishShow:false,
                planShow:false,
                tabIndex: 0,
                templateId: 0,
                template: {},
                publish:{},
                quotaDataList: [],
                planDataList:[],
                plan:{},
                materielDataList:[],
                pager: {
                    dataList: [],
                    pager: {
                        pageCount: 0,
                        pageNumber: 1,
                        pageSize: 15,
                        recordCount: 0
                    },
                    paras: {
                        key: ""
                    }
                },
                userPager: {
                    dataList: [],
                    pager: {
                        pageCount: 0,
                        pageNumber: 1,
                        pageSize: 15,
                        recordCount: 0
                    },
                    paras: {
                        key: ""
                    }
                },
                publishValue: {
                    show: false,
                    template: {id: 0}
                },
            }
        },
        mounted() {
            this.templateId = this.$route.query.templateId;
            this.loadTemplate(this.templateId);
            this.loadTemplateQuota(this.templateId);
        },
        methods: {
            loadTemplate(templateId) {
                this.$api.template.detail(templateId, result => {
                    this.template = result.template;
                })
            },
            loadTemplateQuota(templateId) {
                this.$api.template.getQuota(templateId, result => {
                    this.quotaDataList = result.quotas;
                })
            },
            loadPublishRecord(templateId) {
                this.$api.template.getPublishRecord(templateId, this.pager.pager.pageNumber, result => {
                    this.pager = result.data;
                });
            },
            changePage() {
                this.loadPublishRecord(this.templateId);
            },
            loadPublishUsers(id){
                this.$api.template.getPublishRecordUsers(id,this.userPager.pager.pageNumber,result=>{
                    this.userPager = result.users;
                })
            },
            loadPlan(templateId){
                this.$api.template.getPlans(templateId,result=>{
                    this.planDataList = result.plans;
                })
            },
            goDetail(row){
                this.$api.template.getPublishRecordUsers(row.id,this.userPager.pager.pageNumber,result=>{
                    this.userPager = result.users;
                    this.publish = row;
                    this.publishShow = true;
                })
            },
            goPlanDetail(row){
                this.$api.plan.getPlanMaterielByPlanId(row.id,result=>{
                    this.materielDataList = result.pager;
                    this.plan = row;
                    this.planShow = true;
                })
            },
            cancel(){
                this.publishShow=false;
            },
            handleTab() {
                if (this.tabIndex == 2) {
                    this.loadPublishRecord(this.templateId);
                }else if(this.tabIndex==1){
                    this.loadPlan(this.templateId);
                } else {
                    this.loadTemplateQuota(this.templateId);
                }
            },
            handlePublish() {
                this.publishValue = {show: true, template: this.template};
                this.loadTemplate(this.templateId);
                this.loadTemplateQuota(this.templateId);
            },
            publishDone(data) {
                this.publishValue.show = data.visible;
            },
        }
    }
</script>
<style scoped>
    .user-row {
        margin-top: 10px
    }

    .ground-bg {
        width: 100%;
        margin-top: 20px;
    }

    .el-icon-upload2 {
        margin-left: 50px;
        font-size: 30px;
        color: dodgerblue;
        cursor: pointer;
    }

    .name-title {
        font-size: 20px;
        font-weight: bold
    }

    .el-icon-delete {
        font-size: 20px;
        color: red;
        margin-left: 30px;
        cursor: pointer;
    }

    .user-header-bg {
        margin-left: 5%
    }

    .user-info-bg {
        font-size: 14px;
        color: #545c64
    }

    .header-bg {
        height: 40px !important;
        margin-top: 20px;
        background-color: #409EFF
    }

    .header-title {
        line-height: 40px;
        color: white
    }
    .el-table {
        margin-top: 0px!important;
    }
</style>